<template>
  <div>
    <template v-if="planList.length > 0">
      <router-link tag="a" class="plan-item" v-for="item in planList"
        :class="{'item': from !== 'dashboard'}"
        :key="item.id"
        :to="'/plan/' + item.planId">
        <router-link tag="a" :to="'/dashboard/plan/'+ item.userId">
          <div class="images photo-level">
            <img :src="item.avatar">
             <span :class="[`level`,`level_${item.authType}`,`mini`]"></span>
          </div>
        </router-link>
        <div class="fr info">
          <div class="ftz16 title">{{item.name}}</div>
          <label class="state" :class="getClassByStatus(item.statusText)">{{item.statusText}}</label>
          <span class="price fr">
            <!-- 在售 -->
            <template v-if="item.saleFlag === 1">
            <!--paid   0 未订阅 1 已订阅 null 未登录 -->
              <template v-if="item.paid === 1 || item.userId === userId">
                <span class="ctrl-btn">查看详情</span>
              </template>
              <template v-else>
                <i><span class="icon-coin"></span>{{parseFloat(item.price)}}</i>
                <span class="ctrl-btn red" v-if="from !== 'dashboard'" @click.stop.prevent="buyNow(item)">立即开抢</span>
              </template>
            </template>
             <!-- 停售 -->
              <template v-else>
                <span class="ctrl-btn black">已停售</span>
              </template>
          </span>
          <div class="txt">{{item.intro}}</div>
          <div class="txt-tip">
            <span>来自：
              <router-link tag="a" :to="'/dashboard/plan/'+ item.userId">
                {{item.author}}
              </router-link>
            </span>
            <span class="line"></span>
            <span>订阅人数：{{!item.saleNum ? 0 : item.saleNum}}</span>
            <span class="line"></span>
            <span>服务期限：{{item.beginTime | parseTime('{y}-{m}-{d}')}}</span>
            <span> 至 {{item.endTime | parseTime('{y}-{m}-{d}')}}</span>
          </div>
        </div>
      </router-link>
    </template>
    <NoDataTips v-else/>
  </div>
</template>
<script>
export default {
  props: ['planList', 'from'],
  computed: {
    userId () {
      return this.$store.state.me.sysUser.userId
    }
  },
  methods: {
    getClassByStatus (statusTxt) {
      if (statusTxt === '预售') {
        return ''
      }
      if (statusTxt === '进行中') {
        return 'running'
      }
      if (statusTxt === '进行结束') {
        return 'stop'
      }
    },
    /**
     * 立即购买
     */
    buyNow (item) {
      if (!this.userId) {
        window.layui.layer.msg('请登录后再提问！')
        return false
      }
      this.$emit('buyNowFn', item)
    }
  }
}
</script>
<style lang='scss' scoped>
.plan-item{
  padding:24px;
  height: 94px;
  margin-top: 20px;
  display: block;
  border-bottom: 1px solid #e6e6e6;
  background-color: #fff;
  &.item {
    border-radius: 8px;
    border-bottom: none;
    box-shadow: 7px 7px 0 #d9d9d9;
  }
}
.plan-item .images{
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  background: #fff;
}
.plan-item .images img{
  width: 100;
  height: 100%;
}
.plan-item .info{
  width: 716px;
  height: 106px;
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin-top: -6px;
}
.plan-item .info .title{
  max-width: 80%;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-item .info .state{
  display: inline-block;
  vertical-align: middle;
  height: 22px;
  line-height: 22px;
  color: #fff;
  background: #e94f4f;
  border-radius: 5px;
  margin-left: 8px;
  font-size: 12px;
  padding:0 8px;
  &.running{
    background: #00a0e9;
  }
  &.stop{
    background: #A6A6A6;;
  }
}
.plan-item .info .price i{
  font-weight: bold;
  color: #e94f4f;
}
.info .price .ctrl-btn{
  display: inline-block;
  width: 78px;
  height: 26px;
  text-align: center;
  line-height: 26px;
  background: #00a0e9;
  border-radius: 13px;
  color: #fff;
  margin-left: 10px;
  &.red{
    background: #e94f4f;
  }
  &.black{
    background: #A6A6A6;
  }
}
.info .txt{
  color: #808080;
  line-height: 20px;
  height: 38px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
  margin-top: 14px;
}
.info .txt-tip{
  position: absolute;
  left: 0;
  bottom: 0;
  color: #808080;
}
.info .txt-tip .line{
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 12px;
  background: #808080;
  margin: -2px 10px 0 10px;
}
</style>
